<template>
  <div
    class="flex shadow-[0_1px_0_0_#EFF3FE] bg-[#fff] rounded-tl-[8px] rounded-tr-[8px]"
  >
    <div
      class="flex-1 relative shrink-0 rounded-tl-[8px] rounded-tr-[8px] text-[14px] text-[#3A4259] py-[10px] text-center hover:bg-[#3487FF] hover:text-[#fff] cursor-pointer leading-[20px] transition-all duration-100 after:content-[' '] after:h-[20px] after:w-[1px] after:absolute after:bg-[rgba(0,0,0,0.14)] after:right-[0] last:after:hidden"
      :class="{ 'bg-[#3487FF] text-[#fff]': item.value === modelValue }"
      v-for="item in options"
      :key="item.label"
      @click="handleChange(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: [String, Number, Object],
    default: '',
  },
})

const emit = defineEmits(['change', 'update:modelValue'])

const handleChange = item => {
  emit('update:modelValue', item.value)
  emit('change', item)
}
</script>

<style lang="scss"></style>
